@import '../../../../css/h5/common';

body {
    background-color: #F5F9FC;
}

.main {
    width: 100%;
}

.content {
    background-repeat: no-repeat;
    background-size: 750/@rem auto;
}

* {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.video_container {
    width: 100%;
    height: 100%;
    background-color: black;

    //直播
    .live_video {
        height: 422/@rem;
    }

    #live_video_timer {
        height: 422/@rem;
        color: #fff;
        text-align: center;
        font-size: 34/@rem;
        padding-top: 150/@rem;
        background-size: 100%;

        .title2 {
            margin-top: 30/@rem;
            font-size: 36/@rem;

            span {
                display: inline-block;
                width: 58/@rem;
                height: 55/@rem;
                line-height: 55/@rem;
                background-color: #FFB400;
                margin: 0 10/@rem;
            }
        }
    }

    #live_video_timer2 {
        height: 422/@rem;
        color: #fff;
        position: absolute;
        top: 1.22666667rem;
        background: black;
        opacity: 0.6;
        text-align: center;
        font-size: 34/@rem;
        padding-top: 150/@rem;
        background-size: 100%;

        .title2 {
            margin-top: 30/@rem;
            font-size: 36/@rem;

            span {
                display: inline-block;
                width: 58/@rem;
                height: 55/@rem;
                line-height: 55/@rem;
                background-color: #FFB400;
                margin: 0 10/@rem;
            }
        }
    }

    #live_video_timer3 {
        height: 422/@rem;
        color: #fff;
        position: absolute;
        top: 1.22666667rem;

        text-align: center;
        font-size: 34/@rem;
        padding-top: 150/@rem;
        background-size: 100%;

        .title2 {
            margin-top: 30/@rem;
            font-size: 36/@rem;

            span {
                display: inline-block;
                width: 58/@rem;
                height: 55/@rem;
                line-height: 55/@rem;
                background-color: #FFB400;
                margin: 0 10/@rem;
            }
        }
    }

    //tab切换
    .tabs {
        nav {
            width: 100%;
            height: 88/@rem;
            position: absolute;
            background-color: #fff;
        }

        ul li {
            position: relative;
            width: 180/@rem;
            height: 88/@rem;
            display: inline-block;
            line-height: 88/@rem;
            text-align: center;
            font-size: 32/@rem;
            color: #707070;
            cursor: pointer;
        }

        .dy2 {
            position: relative;
            width: 126/@rem;
            height: 44/@rem;
            left: 78%;
            top: 22/@rem;

            img {
                width: 126/@rem;
                height: 44/@rem;
            }
        }

        .active {
            font-weight: 800;
        }

        .active::after {
            position: absolute;
            content: '';
            width: 22/@rem;
            height: 6/@rem;
            bottom: 0;
            background: #FEA929;
            left: 79/@rem;
        }

        .tab_content {
            width: 100%;
            margin: 0 auto;
            margin-top: 44/@rem;
            background-color: #F5F9FC;

            .content_box {
                display: none;
            }

            .div_show {
                display: block;
            }

            // 视频概述
            .video_msg {
                img {
                    width: 100%;
                }
            }

            //聊天区域
            .chatBox {
                padding-top: 40/@rem;

                .gly {

                    margin: 0 12/@rem;
                    padding-left: 12/@rem;
                    background-color: rgba(254, 179, 42, 0.16);
                    // background-color: red;
                    min-height: 54/@rem;
                    color: #EDA31B;
                    // height: 28/@rem;
                    font-size: 28/@rem;
                    font-weight: 400;
                    line-height: 54/@rem;

                    .guan1 {
                        width: 30/@rem;
                        height: 30/@rem;
                        margin-right: 5/@rem;
                        display: inline-block;
                        margin-top: 0.1rem;
                        vertical-align: top;
                    }
                }

                .gly_none {
                    visibility: hidden;
                }

                .yq {
                    position: absolute;
                    bottom: 164/@rem;
                    right: 0;
                }


                .chatList {
                    margin-top: 20/@rem;
                    p {
                        margin-bottom: 40/@rem;
                        padding-left: 24/@rem;
                        height: 28/@rem;
                        font-size: 28/@rem;
                        font-weight: 400;
                        line-height: 34/@rem;
                        color: #3C3C3C;

                    }

                    .gray {
                        color: #707070;

                        .guan {
                            width: 30/@rem;
                            height: 30/@rem;
                            margin-right: 5/@rem;
                            vertical-align: top;
                        }
                    }

                    .guan_text {
                        color: #feb32a !important;
                    }
                }


                .inputBox {
                    height: 100/@rem;
                    background-color: #fff;
                    position: absolute;
                    bottom: 0;
                    width: 100%;

                    .input-emoji {
                        height: 58/@rem;
                        line-height: 58/@rem;
                        margin-top: 22/@rem;
                        margin-left: 24/@rem;
                        background: #F0F0F0;
                        border-radius: 30/@rem;
                        width: 486/@rem;

                        .input_bottom {
                            height: 58/@rem;
                            margin-left: 22/@rem;
                            background: none;
                            outline: none;
                            border: 0px;
                            width: 90%;
                        }
                    }

                    .emojiBtn {
                        height: 58/@rem;
                        width: 58/@rem;
                        position: absolute;
                        top: 22/@rem;
                        right: 166/@rem;
                    }

                    .emoji_box {
                        position: absolute;
                        height: 250/@rem;
                        // left: 30/@rem;
                        bottom: 20/@rem;
                        font-size: 58/@rem;
                        background-color: #fff;
                        width: 100%;
                        z-index: 200;
                        padding-left: 55/@rem;

                        // padding-right: 25/@rem;
                        span {
                            cursor: pointer;
                            display: inline-block;
                            width: 76/@rem;
                            text-align: center;
                        }
                    }

                    .send {
                        position: absolute;
                        top: 22/@rem;
                        right: 24/@rem;
                        width: 126/@rem;
                        height: 58/@rem;
                        background: #FEB303;
                        opacity: 1;
                        border-radius: 12/@rem;
                        text-align: center;
                        font-size: 32/@rem;
                        font-weight: 500;
                        line-height: 58/@rem;
                        color: #FFFFFF;
                        opacity: 1;

                    }
                }


            }

            //视频列表
            .videoList {

                padding-top: 20/@rem;

                .videos {
                    padding-bottom: 20/@rem;

                    .video {
                        display: inline-block;
                        width: 340/@rem;
                        margin-left: 24/@rem;
                        padding-bottom: 20/@rem;
                        vertical-align: middle;

                        img {
                            width: 340/@rem;
                            height: 192/@rem;
                        }

                        .title {
                            width: 340/@rem;
                            height: 90/@rem;
                            font-size: 28/@rem;
                            font-weight: 500;
                            line-height: 34/@rem;
                            color: #3C3C3C;
                            opacity: 1;
                        }
                    }
                }

            }
        }
    }

}